<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-row>
                <el-col :span="20">
                    <el-form :inline="true" size="mini" label-width="10px;">

                        <el-form-item label="姓名:">
                            <el-input v-model="condition.userName" class="form-item"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号:">
                            <el-input v-model="condition.phone" class="form-item"></el-input>
                        </el-form-item>

                        <el-form-item label="申请时间:">
                            <el-date-picker v-model="condition.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="状态:">
                            <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.status">
                                <el-option label="全部" :value="0"></el-option>
                                <el-option label="待处理" :value="1"></el-option>
                                <el-option label="已通过" :value="2"></el-option>
                                <el-option label="未通过" :value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="50px"/>
            <el-table-column prop="userName" label="姓名" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="phone" label="手机号" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="applyDate" label="申请时间" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="handleDate" label="处理时间" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="handleUserName" label="处理人" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="failureReason" label="失败原因" header-align="center" align="center"/>
            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center" width="120px;">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showHandle(scope.row)" v-if="scope.row.status === 1">处理</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>

        <el-dialog title="处理" :visible.sync="dialogVisible" width="500px" append-to-body @closed="onDialogClosed">
            <div>
                <el-form ref="form" :model="form" label-width="95px" size="mini">
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="2">通过</el-radio>
                            <el-radio :label="3">拒绝</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="拒绝原因" prop="failureReason" v-if="form.status === 3">
                        <el-input v-model="form.failureReason" style="width: 305px;" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit" :loading="btnLoading">保存</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import {getSiteApplyRecords, handleSiteApply} from '@/api/site/site'

    export default {
        name: 'site-apply',
        data() {
            return {
                loading: false,
                dialogVisible: false,
                btnLoading: false,
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    status: 1,
                    phone: "",
                    userName: "",
                    dateRange: [],
                    start: null,
                    end: null
                },
                data: {},
                form: {
                    id: null,
                    status: 2,
                    failureReason: ""
                },
            }
        },
        computed: {},
        mounted() {
            this.loadList()
        },
        methods: {
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadList() {
                this.loading = true
                let params = JSON.parse(JSON.stringify(this.condition))
                if (this.condition.dateRange && this.condition.dateRange.length > 0) {
                    params.start = this.condition.dateRange[0]
                    params.end = this.condition.dateRange[1]
                    params.dateRange = null
                }
                let res = await getSiteApplyRecords(params)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            showHandle(row) {
                this.dialogVisible = true;
                this.form.id = row.id
            },
            onDialogClosed() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields()
                }
            },
            async onSubmit() {
                this.btnLoading = true;
                let res = await handleSiteApply(this.form)
                this.btnLoading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.dialogVisible = false;
                this.$notify({title: '消息', message: '处理成功', type: 'success'});
                this.loadList()
            }
        }
    }
</script>

<style scoped>
</style>
